<template>
	<view :class="[zxinfo.tabShow?'xxguanbi':'','btns_lb']" v-if="zxinfo.zxisShow">
		<view class="cdlist" v-for="(el,ind) in list" @click="clickInd(ind)">
			<image v-if="ind==0&&zxinfo.isplay" class="cdlist-image" :src="getImg(el.icon)"></image>
			<image v-if="ind==0&&!zxinfo.isplay" class="cdlist-image" :src="getImg(el.icon1)"></image>
			<image v-if="ind!=0" class="cdlist-image1" :src="getImg(el.icon)"></image>
			<text :class="[ind==0?'cdlist-text':'cdlist-text1']">{{el.name}}</text>
		</view>
	</view>
</template>
<script>
	export default{
		props:["zxinfo"],
		data(){
			return{
				list:[
					{name:'',icon1:'icon_yyzt.png',icon:'icon_yybf.png'},
					{name:'步行',icon:'icon_bxdh.png'},
					{name:'自驾',icon:'icon_zjdh.png'},
					{name:'公交',icon:'icon_gjdh.png'},
					{name:'骑行',icon:'icon_qxdh.png'}
				]
			}
		},
		watch:{
			zxinfo(){}
		},
		mounted() {
			
		},
		methods:{
			getImg(url){
				return 'http://newmap.tour-ma.com/r/cms/www/newmap/newmap/'+url;
			},
			clickInd(ind){
				if(ind==0){
					this.$emit('changezx', {
						type:'pl',
						isplay: !this.zxinfo.isplay
					})
				}else{
					this.$emit('changezx', {
						type:'lx',
						ind: ind
					})
				}
			}
		}
	}
</script>

<style>
	.cdlist-text1{
		font-size:9px;
		font-weight:400;
		color:rgba(102,102,102,1);
		line-height:9px;
		display: block;
	}
	.cdlist-text{
		font-size:10px;
		font-weight:bold;
		color:rgba(51,51,51,1);
		line-height:13px;
		display: block;
		white-space: nowrap;
		position: relative;
		left: -3px;
	}
	.cdlist-image1{
		width:18px;
		height:18px;
		margin-top: 10px;
	}
	.cdlist-image{
		width:31px;
		height:31px;
		margin-top: 6px;
	}
	.cdlist{
		width: 30px;
		margin-left: 6px;
		height: 25%;
		border-bottom: 1px solid #DDDDDD;
		text-align: center;
		padding-bottom: 7px;
	}
	.xxguanbi {
		/* bottom: 295px; */
	}
	.btns_lb{
		width:42px;
		height:277px;
		background:rgba(255,255,255,1);
		box-shadow:0px 0px 15px 0px rgba(0, 0, 0, 0.14);
		border-radius:21px;
		position: absolute;
		left: 15px;
		display: flex;
		flex-direction: column;
	}
</style>
